import React from 'react';
import './CommodityEvaluate.css'


const CommodityEvaluate = (props) => {

    console.log('评价', props);
    // const commodityLabel = props.commodityLabel
    const { userCommonts = [], commodityLabel = [] } = props.commonts
    const { buysImgs = [] } = props
    // const userCommonts = props.userCommonts
    let len = userCommonts.length
    let buyLen = buysImgs.length
    // console.log('buyimgs',buysImgs[0].imgurl);
    return (
        <div className='commodityEvaluate-container'>
            <div className="evaluate-nums">
                <span>宝贝评价({len})</span>
                <span>
                    查看全部
                    <i className='iconfont'> &#xe629;</i>
                </span>
            </div>
            <div className="commodity-label">
                {/* <span>喝了后很有效果(6)</span>re
                <span>超出期望值(2)</span> */}
                {
                    commodityLabel.map((item, index) => {
                        return (
                            <span key={index}>{item}</span>
                        )
                    })
                }
            </div>
            <div className='userCommonts-detail'>
                {/* 循环item */}

                {
                    userCommonts.map((item, index) => {
                        return (
                            <div className="commonts-item" key={index}>
                                <div className="commonts-userInfo">
                                    <div className="commonts-userAvatar">
                                        <img src={item.userAvatar} alt="" />
                                    </div>
                                    <div className="commonts-userName">
                                        <span>{item.userName}</span>
                                        <span>{item.userTime}</span>
                                    </div>
                                </div>
                                <div className="commonts-detail">
                                    {item.userCommntsDetail}
                                </div>
                            </div>
                        )
                    })
                }

            </div>

            <div className="evaluate-nums">
                <span>买家秀({buyLen})</span>
                <span>
                    查看全部
                    <i className='iconfont'> &#xe629;</i>
                </span>
            </div>

            <div className="buyers-imgs">
                {
                    buysImgs.map((item, index) => {
                        return (
                            <div className="buyers-item" key={index}>
                                <img src={item.imgurl} alt="" />
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default CommodityEvaluate;
